<template>
    <div class="container">
        <a-card>
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="门店订单"></a-tab-pane>
                <a-tab-pane key="2" tab="小程序订单"></a-tab-pane>
                <a-tab-pane key="3" tab="饿了么订单"></a-tab-pane>
                <a-tab-pane key="4" tab="美团订单"></a-tab-pane>
            </a-tabs>
            <div class="search-box">
                <div class="ant-btn-group">
                    <a-button>今日</a-button>
                    <a-button>昨日</a-button>
                    <a-button>本周</a-button>
                    <a-button>本月</a-button>
                    <a-button>上月</a-button>
                    <a-button>今年</a-button>
                </div>
                <div class="search-form">
                    <a-range-picker style="width: 390px;" />
                    <a-input placeholder="请扫码/收入商品名称/助记词/商品条形码/备注" />
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <a style="font-size: 14px;width: 160px;display: block;" @click="expand = !expand">
                        <span>高级查询</span>
                        <template v-if="expand">
                            <UpOutlined />
                        </template>
                        <template v-else>
                            <DownOutlined />
                        </template>
                    </a>
                </div>
            </div>
            <a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 240 }">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'goods'">
                        <div>{{ record.name }}</div>
                        <div class="stock">{{ record.order_no }} <span>库存：{{ record.stock }}</span></div>
                    </template>
                    <template v-if="column.key === 'action'">
                        <a-button size="small">重打小票</a-button>
                    </template>
                </template>
                <template #footer>收款合计：135859元&emsp;收款笔数：358笔</template>
            </a-table>
        </a-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'

const activeKey = ref("1");
const expand = ref(false);

const columns = ref([
    {
        name: 'id',
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 60
    },
    {
        name: 'created_at',
        title: '下单时间',
        dataIndex: 'created_at',
        key: 'created_at',
        width: 100
    },
    {
        name: 'order_no',
        title: '订单编号',
        dataIndex: 'order_no',
        key: 'order_no'
    },
    {
        name: 'amount',
        title: '订单金额',
        dataIndex: 'amount',
        key: 'amount',
        width: 100
    },
    {
        name: 'payment',
        title: '付款方式',
        dataIndex: 'payment',
        key: 'payment',
        width: 100
    },
    {
        name: 'payer',
        title: '支付账号',
        dataIndex: 'payer',
        key: 'payer',
        width: 100,
        align: 'center'
    },
    {
        name: 'status',
        title: '订单状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        align: 'center'
    },
    {
        name: 'commission',
        title: '会员/佣金',
        dataIndex: 'commission',
        key: 'commission',
        width: 100,
        align: 'center'
    },
    {
        name: 'checker',
        title: '收银员',
        dataIndex: 'checker',
        key: 'checker',
        width: 100,
        align: 'center'
    },
    {
        name: 'action',
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 100,
        align: 'center'
    },
]);
const dataSource = ref([
    {
        id: 1,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        price: '¥13元/包',
        stock: 20,
        quantity: 2,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 2,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        price: '¥13元/包',
        stock: 20,
        quantity: 1,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 3,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        price: '¥13元/包',
        stock: 20,
        quantity: 6,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 4,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        price: '¥13元/包',
        stock: 20,
        quantity: 6,
        discount: 0,
        total: '¥26元',
    },
    {
        id: 5,
        order_no: '326199107',
        name: '黄金叶(硬十渠)',
        price: '¥13元/包',
        stock: 20,
        quantity: 6,
        discount: 0,
        total: '¥26元',
    }
]);
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;

    .search-box {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-bottom: 16px;
        justify-content: space-between;

        .ant-btn-group {
            display: flex;
            gap: 6px;
        }

        .search-form {
            display: flex;
            gap: 6px;
            align-items: center;
        }
    }
}
</style>